<template>
	<div>
		<div class="select">
			<div class="item" @click="checkItem(item,index)" :class="{op:!item.checked}"
				v-for="(item,index) in listData" :key="index">
				<div class="icon">
					<image :src="item.icon" mode="widthFix"></image>
				</div>
				<div class="title">{{$t(item.title)}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: ["itemValue","read"],
		data() {
			return {
				listData: [{
					id: 1,
					title: "公路运输",
					icon: "/static/card/t1.png",
					checked: false
				}, {
					id: 2,
					title: "铁路运输",
					icon: "/static/card/t2.png",
					checked: false
				}, {
					id: 3,
					title: "空运",
					icon: "/static/card/t3.png",
					checked: false
				}, {
					id: 4,
					title: "海运",
					icon: "/static/card/t4.png",
					checked: false
				}, {
					id: 7,
					title: "多式联运",
					icon: "/static/card/t5.png",
					checked: false
				}]
			}
		},
		watch:{
			itemValue(){
				this.init()
			}
		},
		created() {
			if (this.itemValue) {
				this.init()
			}
		},
		methods: {
			init(){
				this.listData.forEach(item => {
					const exists = String(this.itemValue).split(",").find(str => str == item.id)
					if (exists) item.checked = true
				})
			},
			checkItem(item, index) {
				if(this.read) return
				item.checked = !item.checked;
				this.$emit("change", {
					ids: this.listData.filter(item => item.checked).map(item => item.id).join(
						","),
					labels: this.listData.filter(item => item.checked).map(item => item.title).join(
						",")
				})
			}
		}
	}
</script>

<style lang="less">
	.select {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		font-weight: 250;
		font-size: 24rpx;
		color: #1d1d1d;
		padding: 0 22rpx;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			flex: 1;
			flex-shrink: 0;
			text-align: center;
		}

		.icon {
			width: 56rpx;
			height: 56rpx;
			margin-bottom: 16rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.op {
		opacity: 0.3 !important;
	}
</style>